<template>
	<view class="app-container">
		<!-- 广告栏 -->
		<!-- <view class="advertisement app-box">
			<swiper indicator-dots autoplay circular>
				<swiper-item v-for="item in bannerArr" :key="item.id" @click="toPostPage(item.id)">
					<image :src="item.images[0].url" mode="aspectFill"></image>
					<text>{{ item.title }}</text>
				</swiper-item>
			</swiper>
		</view> -->
		<!-- swiper banner -->
		<view class="swiper-wrapper">
			<swiper
				class="swiper"
				indicator-dots="true"
				autoplay="true"
				interval="3000"
				duration="500"
				indicator-color="rgba(255, 255, 255, .3)"
				indicator-active-color="#fff"
				circle
			>
				<swiper-item v-for="item in bannerArr" :key="item.id">
					<image :src="item.images[0].url" mode="aspectFill" class="swiper-image"></image>
					<view class="swiper-text">
						<view class="swiper-title">{{ item.title }}</view>
						<view class="swiper-subtitle">每日精选桌游帖子</view>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 按钮栏 -->
		<view class="btn-group">
			<view v-for="item in btnList" :key="item.title" class="btn-item" @click="toBtn(item.url)">
				<view class="btn-image">
					<u-icon :name="item.icon" size="24" color="#fff"></u-icon>
				</view>
				<view class="btn-text">{{ item.title }}</view>
			</view>
		</view>

		<!-- 标签页 -->
		<u-tabs
			:list="tablist"
			:lineColor="themeColor"
			:activeStyle="{ color: '#303133', fontWeight: 'bold', transform: 'scale(1.2)', transition: 'all 0.2s' }"
			:current="currentTab"
			@click="handleTabClick"
		></u-tabs>

		<!-- 帖子内容 -->
		<view class="post app-box" v-for="item in filterPostList" :key="item" @click="toPostPage(item.id)">
			<view class="author">
				<image :src="item.userVO.avatarUrl" class="app-avatar"></image>
				<view class="nickname">{{ item.userVO.nickname }}</view>
				<u-tag :text="'Lv.' + item.userVO.level" size="mini" :borderColor="themeColor" :bgColor="themeColor" color="#fff"></u-tag>
			</view>
			<view class="detail">
				<view class="app-title">{{ item.title }}</view>
				<view class="app-content content">{{ item.content }}</view>
				<image v-if="item.images && item.images.length > 0" :src="item.images[0].url" mode="aspectFill"></image>
				<view class="info">
					<view style="margin-right: auto">{{ item.time }} · {{ item.area }}</view>
					<view class="icon"><u-icon name="thumb-up-fill" :label="item.likes" :color="item.liked ? themeColor : '#999'"></u-icon></view>
					<view class="icon"><u-icon name="star-fill" :label="item.collect" :color="item.collected ? themeColor : '#999'"></u-icon></view>
					<view class="icon"><u-icon name="chat-fill" :label="item.comments" color="#999"></u-icon></view>
				</view>
			</view>
		</view>

		<!-- Tabbar -->
		<Tabbar :active="0"></Tabbar>
	</view>
</template>

<script>
import request from '@/api/http.js';
import { timeCalc } from '@/api/utils.js';

export default {
	data() {
		return {
			tablist: [
				{
					name: '全部'
				},
				{
					name: '日常交流'
				},
				{
					name: '桌游攻略'
				},
				{
					name: '情报速递'
				},
				{
					name: '桌游战报'
				}
			],
			currentTab: 0,
			postArr: [], // 帖子列表
			officialPostArr: [],
			bannerArr: [],
			btnList: [
				{
					title: '附近活动',
					icon: require('@/static/activity.png'),
					url: '/pages/Activity/Activity'
				},
				{
					title: '我的消息',
					icon: 'bell-fill',
					url: '/pages/Message/Message'
				}
			]
		};
	},
	computed: {
		// tab筛选过的帖子列表
		filterPostList() {
			if (this.currentTab == 0) {
				return this.postArr;
			} else {
				return this.postArr.filter((item) => item.area == this.tablist[this.currentTab].name);
			}
		}
	},
	onLoad() {},
	onShow() {
		this.getPosts();
		// this.getAllOfficialPost();
	},
	methods: {
		async getPosts() {
			let res = await request('/forum/page');
			let postArr = res.data.list;

			postArr.forEach((item) => {
				item.time = timeCalc(item.createTime);
			});
			this.postArr = postArr;
			// 最后三个帖子
			this.bannerArr = postArr.slice(-3);
		},
		async getAllOfficialPost() {
			// 获取前两个官方公告详情
			// let res = await request(`/forum/getAnnouncements`);
			// this.officialPostArr = res.data;
		},
		toPostPage(id) {
			uni.navigateTo({
				url: `/pages/Forum/PostPage?id=${id}`
			});
		},
		toAllOfficialPost() {
			uni.navigateTo({
				url: '/pages/Forum/AllOfficialPost/AllOfficialPost'
			});
		},
		toBtn(url) {
			uni.navigateTo({ url });
		},
		handleTabClick(e) {
			console.log(e);

			let tab = e.name;
			this.currentTab = e.index;
		}
	}
};
</script>

<style>
page {
	background: #f8f8f8;
}
</style>

<style lang="scss" scoped>
.swiper-wrapper {
	width: $max-width;
	margin-bottom: 20rpx;

	.swiper {
		border-radius: 25rpx;
		overflow: hidden;
		height: 320rpx;

		//指示点位置，支持微信小程序
		& /deep/ .wx-swiper-dots-horizontal {
			left: 630rpx;
		}

		.swiper-image {
			width: 100%;
			height: 100%;
			position: relative;

			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
				z-index: 2;
			}
		}

		.swiper-text {
			width: 650rpx;
			position: absolute;
			bottom: 30rpx;
			left: 30rpx;
			color: #fff;
			z-index: 2;
			letter-spacing: 1rpx;

			.swiper-title {
				width: 100%;
				max-width: 100%;
				margin-bottom: 10rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.swiper-subtitle {
				font-size: 28rpx;
				opacity: 0.9;
			}
		}
	}
}

.btn-group {
	width: $max-width;
	display: flex;
	justify-content: space-around;
	margin: 0;
	gap: 40rpx;

	.btn-item {
		display: flex;
		justify-content: center;
		align-items: center;
		flex: 1;
		height: 60rpx;
		gap: 40rpx;
		background: linear-gradient(to right, #ff6a00, #ff954d);
		border-radius: 20rpx;
		padding: 10rpx 20rpx;
		color: #fff;
		font-size: $font-size-base;
		transition: all 0.3s;

		.btn-image {
			width: 50rpx;
			height: 50rpx;
		}

		.btn-text {
			font-size: $font-size-base;
			margin-bottom: 1rpx;

		}
	}
}

.u-tabs {
	margin: 10rpx 0;
}

.post {
	.author {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;

		.nickname {
			margin-right: 20rpx;
		}
	}

	.detail {
		.content {
			width: 100%;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 5;
			overflow: hidden;
		}

		image {
			border-radius: 30rpx;
			width: 100%;
		}

		.info {
			display: flex;
			justify-content: flex-end;
			color: #999;
			margin-top: 10rpx;
			padding-top: 10rpx;
			border-top: 1px gainsboro solid;
			font-size: $font-size-small;

			.icon {
				margin-right: 20rpx;
			}
		}
	}
}
</style>
